iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

前端工程師的30份套餐系列 第 3

Day3-JavaScript 函式(function)

  • 分享至 

  • xImage
  •  

我們經常會將功能寫成一個函式,之後可以再重複使用,是JavaScript非常重要的特性。而函式通常會有回傳值,使用return作為最後的回傳值輸出,但並非每種函式都需要回傳值,也有可能透過輸出的方式來將結果輸出。

函式的基本語法: function eat(){}

  • 有名稱的函式
function eat(a,b){
    return a+b
}

函式的呼叫是使用函式名稱加上括號(()),以及在括號中傳入對應的參數值,即可呼叫這個函式執行。例如:

function eat(a,b) {
    return a+b
}
console.log(eat(1,2)) //3
  • 匿名函式
    通常用來搭做一個指定值,指定給一個變數/常數,被指定後這些變數/常數就成了函式的名稱。匿名函式通常用在
    1.當作其他函式的值傳入參數
    2.一次性執行
function() {}

而另一種函式表達式(FE):用變數/常數指定匿名函式

const eat = function(a,b) {
    return a+b
}
  • 立即函式(IIFE)
    又稱為立即呼叫的函式表達式,是一種獨特的模式,與表達式的強制執行有關,在執行讀取到定義時,就會立即執行,不像是一般的函式需要呼叫才會執行,有兩種語法長得很像但功能一樣,都有人在使用:
(function () {...})()
(function () {...}())

IIFE的主要用途:分隔作用範圍,避免全域作用的汙染


純粹函式與副作用

副作用:代表著可能更動到外部環境,或者更動到傳入的參數值。
函式又以兩種方式區分: 純粹函式 與 不純粹函式。

純粹函式(pure function)滿足以下定義的函式:

  • 給定相同的輸入(傳入值),一定會回傳相同輸出值結果(回傳值)
  • 不會產生副作用-不會改變原始輸入參數,或是外部環境。
  • 不依賴任何外部的狀態(例如變數)。
const sum = function(value1, value2) {
  return value1 + value2;
}

不純粹函式(impure function)
需要依賴外部的狀態值(變數值)

let count = 1;

let increaseAge = function(value) {
  return count += value;
}

提升(Hoisting)

最重要的特徵就是函式宣告提升,意思是執行程式碼之前可以先讀取函式宣告。所以可以把函式宣告放在呼叫之後,如範例:

eat(1,2)  //3
function eat(x,y){
   return (x+y)
}

不過使用匿名函式指定值的方式(函式表達式),就不會有整個函式都被提升的情況,只有變數名稱被提升,必須再使用前先賦值,所以這段程式碼執行時就會出錯:

milkTea() // milkTea is not a function
let milkTea = function(){
    console.log('好喝')
}

今天覺得寫的還不夠,但至少為了自己補充一些可能遺忘的基礎觀念,還有許多關於函式的重點沒有提到,此外還有ES6箭頭函式的介紹,敬請期待

參考連結: 從ES6開始的JavaScript學習生活


上一篇
Day2-var 與let、const
下一篇
Day4-ES6 箭頭函式
系列文
前端工程師的30份套餐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言